<template>
	<vCommonPage :type="1" title="智能导诊" ref="common" centerName="推荐科室" class="needBigBox tjks">
		<div slot="customContent" style="width: 100%">

			<div class="topTitle">
				根据您的选择，建议您优先去以下科室挂号就诊
			</div>
			<div class="topTitleSec">
				（声明：本结果仅作为建议，不能代替执业医生的诊断）
			</div>
			<div class="topTitleThir center">
				推荐结果是否准确？
				<el-button :class="resType == 1?'click topY':'topY'" @click="isCorre()">是</el-button>
				<el-button :class="resType == 0?'click topN':'topN'" @click="openBox()">否</el-button>
			</div>

			<div class="scrollBox">
				<div class="yyBox ">
					<div class="yyBoxItem" v-for="(item,index) in dataList">
						<div class="boxTitle">
							<span>{{index+1}}.{{item.deptName}}</span>
							<span style="margin-left: 35px;">80%</span>
						</div>
						<div class="boxCenter">
							<div class="boxCenterLeft">
								<el-button v-if="index<=5" v-for="(items,indexs) in item.zz" class="boxCenterLeftItem">
									{{items.name}}
								</el-button>
							</div>
							<div class="boxCenterRight">
								<el-button class="gh" @click="gotoYyGh(item,'mzgh')">挂号</el-button>
								<el-button class="yy " @click="gotoYyGh(item,'mzyy')">预约</el-button>
							</div>
						</div>
						<div class="boxaddress">
							{{item.address}}
						</div>
					</div>
				</div>
			</div>
			<div class="bottomBox">
				<el-button type="primary" class="BtnTextHome" @click="goBack()">返回</el-button>
				<el-button type="primary" class="BtnTextHome" @click="goBackHome()">首页</el-button>
			</div>


			<vResultBox ref="resBox" @closeRestBox="closeRestBox" :type="resType"></vResultBox>

			<div class="bzmsBox" v-show="showBox">
				<div class="bzmsBoxTilte">
					请选择推荐科室结果可能不准确的原因(可多选)
				</div>
				<div class="choseBox">
					<el-button :class="item.isClick?'choseBoxItem blueClick':'choseBoxItem'"
						v-for="(item,index) in choseList" @click="clickChose(item,index)">{{item.name}}</el-button>
				</div>
				<div class="centerBox">
					<el-button class="centerBtnCancel" @click="cancel()">取消</el-button>
					<el-button class="centerBtnMakeSure" @click="makeSure()">确认</el-button>
				</div>
			</div>

			<div v-show="showBox||resShow" @click="hoddenBox()" class="yiny"></div>
		</div>
	</vCommonPage>
</template>
<script>
	import {
		MessageBox,
		Loading
	} from "element-ui";
	import {
		getRecommendSymAndDept //智能导诊科室
	} from "@api/apiBox/zndz"
	import {
		changeChineToDate,
		fun_date
	} from "../../assets/js/getTime.js"
	import {
		registerSource
	} from "@api/apiBox/mzyyAndMzgh"
	export default {
		name: "zndz",
		data() {
			return {
				imgList: [{
						src: require('../../assets/images/zndz/man.png'),
						isClick: false
					},
					{
						src: require('../../assets/images/zndz/woman.png'),
						isClick: false
					}
				],
				dataList: [],
				choseList: [{
						name: '模特就诊部位触摸选择不够准确',
						isClick: false
					}, {
						name: '就诊部位病状选择不够细分或详细',
						isClick: false
					},
					{
						name: '与您不适症状对应的就诊部位没有或不相符',
						isClick: false
					}, {
						name: '与您不适症状对应的病症选择没有或不相符',
						isClick: false
					}, {
						name: '其他',
						isClick: false
					}
				],
				showBox: false,
				resShow: false,
				resType: 3, //是否准确 0不准确 1准确
				tjIsFinish: false
			};
		},
		methods: {
			//点击不正确 显示不正确原因选择框
			openBox() {
				if (!this.tjIsFinish) {
					this.showBox = true;
					//重置倒计时
					this.$refs.common.resetTime();
				}
			},
			cancel() {
				this.showBox = false;
			},
			//点击病症描述
			clickChose(item, index) {
				this.choseList[index].isClick = !this.choseList[index].isClick;
			},
			//不准确 确认按钮 提交后台
			makeSure() {
				//关闭反馈框
				this.showBox = false;
				//打开弹出框
				this.resShow = true;
				this.$refs.resBox.open();
				this.resType = 0;

				//点击完确认按钮就不能再点击 另外一个了
				this.tjIsFinish = true;

			},
			//准确
			isCorre() {
				if (!this.tjIsFinish) {
					this.resShow = true;
					this.$refs.resBox.open();
					this.resType = 1;
				}
				//选择是不能再选择否了
				this.tjIsFinish = true;
			},
			closeRestBox() {
				this.resShow = false;
			},
			//点击阴影 
			hoddenBox() {
				this.showBox = false;
				this.resShow = false;
				this.$refs.resBox.close();
			},
			async initData() {
				//拼接id
				let ids = [];
				let idNames = [];
				for (let item of this.$store.state.zndz.detailInfo.detailIdList) {
					ids.push(item.zzid)
					idNames.push(item.detail_value)
				}
				let data = {
					data: {
						zzid: ids.toString(),
						sex: this.$store.state.zndz.bwInfo.sex,
						bwId: this.$store.state.zndz.bwInfo.menuId
					},
					that: this
				}
				const res = await getRecommendSymAndDept(data);
				console.log(res, '!!')
				this.dataList = [];
				this.dataList = res.data;
			},
			//点击预约挂号按钮
			async gotoYyGh(item, type) {
				//查詢該科室是否有号源
				var data = {
					data: {
						beginDate: changeChineToDate(new Date(), 'YYYY-MM-DD'),
						endDate: fun_date(7),
						deptId: item.deptId
					},
					that: this
				}
				const res = await registerSource(data);
				if (res.data.length > 0) {
					//存储选择的科室信息
					this.$store.dispatch("zndz/updateKsInfo", item); //存储科室选择信息
					if (type == 'mzgh') {
						this.$router.push({
							name: 'xzskfs',
							query: {
								pageName: type,
								name: '门诊挂号'
							},
						});
					
					} else if (type == 'mzyy') {
						this.$router.push({
							name: 'xzskfs',
							query: {
								pageName: type,
								name: '门诊预约'
							},
						});
					
					}
				}else{
					MessageBox.alert('该科室暂无医生排班' + e, {
						confirmButtonText: "确定",
						callback: action => {
							MessageBox.close();
						}
					});
				}
			}
		},
		computed: {

		},
		components: {},
		mounted() {},
		created() {
			this.initData();
			//部位信息
			console.log(this.$store.state.zndz.detailInfo, '详细信息'); //详细选择信息)
		}
	};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
	@import "../../assets/css/zndz/tjks.scss";
</style>

<style>
	.tjks .el-button+.el-button {
		margin-left: 0px;
	}

	@media (min-height: 1919px) {
		.tjks .el-row-vertical {
			height: calc(100% - 208px);
		}
	}
</style>
